<template>
 <StackLayout class="cell" height="120">
  <GridLayout class="top" height="50" columns="auto, *, auto">
    <label :class="typeClass" col="0" :text="type" verticalAlignment="center"/>
    <label col="1" class="date" :text="timeStr" verticalAlignment="center"/>
    <label :class="statusClass" col="2" :text="transaction.status" verticalAlignment="center"/>
  </GridLayout>
  <GridLayout columns="2*, 3*, 3*" rows="30, auto">
    <label class="label" col="0" row="0" text="Coin" horizontalAlignment="left"/>
    <label class="label" col="1" row="0" text="Amount" horizontalAlignment="right"/>
    <label class="label" col="2" row="0" text="Fee" horizontalAlignment="right"/>
    <label class="cell-content" col="0" row="1" :text="transaction.coin" horizontalAlignment="left"/>
    <label class="cell-content" col="1" row="1" :text="transaction.amount" horizontalAlignment="right"/>
    <label  class="cell-content" col="2" row="1" :text="transaction.fee" horizontalAlignment="right"/>
  </GridLayout>
</StackLayout>
</template>
<script>
require('~/utils/dateFormat');
import {dataBus} from '~/business/DataBus'

export default {
  props: ['transaction'],
  computed: {
    timeStr() {
      let date = new Date(this.transaction.time)
      return date.format('HH:MM mm/dd')
    },
    isBuyOrSell() {
      if (this.isBuy == true) {
        return true
      } else if (this.isBuy == false) {
        return false
      } else {
        return this.order.type == 'buy' ? true : false
      }
    },
    type() {
      return this.transaction.type == 'Deposit' ? 'Receive' : 'Send'
    },
    typeClass() {
      return this.transaction.type == 'Deposit' ? 'receive' : 'send'
    },
    statusClass() {
      return this.transaction.status == 'Completed' ? 'completed' : 'status'
    }
    // status() {
    //   if (this.order.status == 'opened') {
    //     return 'Cancel'
    //   } else if (this.order.status == 'canceled') {
    //     return 'Canceled'
    //   } else {
    //     return 'Completed'
    //   }
    // }
  },
  methods: {
    cancelPressed() {
      const self = this
      dataBus.cancelOrder(this.order.id, {
        onSuccess: () => {
          self.onCanceld && self.onCanceld()
          alert({
            title: 'Success',
            message: 'Delete successfully',
            okButtonText: 'OK',
          })
        },
        onError: (code, msg) => {
          alert(msg)
        }
      })
    }
  }
}
</script>

<style scoped>
  .cell {
    padding-left: 12;
    padding-right: 12;
    border-bottom-width: 1;
    border-bottom-color: #274867;
    background: #203956;
    margin-bottom: 10;
  }
  .send {
    color: #DC3E32;
    font-size: 14;
  }
  .receive {
    color: #1AC86A;
    font-size: 14;
  }
  .date {
    color: white;
    font-size: 14;
    margin-left: 20;
  }
  .status {
    color: #6292BE;
    font-size: 14;
    background-color: transparent;
  }
  .completed {
    color: #01ECF4;
    font-size: 14;
    background-color: transparent;
  }
  .label {
    color: #6292BE;
    font-size: 12;
  }
  .cell-content {
    color: white;
    font-size: 14;
  }
</style>
